<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机字界面</title>
		<style>
			.wai
			{
				height: 600px;
				background-color: #A5C57A;
				padding-top: 100px;
			}
			.xian
			{
				width: 40em;
				color: whitesmoke;
				background-color: #83B5F7;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				padding: 2em 0em 0em 0em;
				margin: 0 auto;
			}
			.xian span
			{
				display: block;
				font-size: ;
			}
		</style>
		<script>
			//兼容性获取样式
			function getClass(obj,name)
			{
				if(obj.currentStyle)
				{
					return obj.currentStyle[name];//IE下获取非行间样式
				}else
					{
						return getComputedStyle(obj,false)[name];//FF、Chorme下获取费行间样式
					}
			}
			
			function sui(strings,id_name,)
			{
				if(strings == "") return;//判断输入字符是否为空
				var obj = document.getElementById(id_name);
				//parseInt(Math.random()*(n-m+1)+m);//生成一个从 m - n 之间的随机整数
				
				//随机写入<span>标签
				var num = strings.length;
				var new_str = "";
				var i=0;
				while(true)
				{
					var a = parseInt(Math.random()*(num/2-1+1)+1);
					var b = parseInt(Math.random()*(7-4+1)+4);
					//alert(a);
					new_str = new_str + "<span style='font-size:" + b +"em;'>";
					for(var j=0;j<a;j++)
					{
						new_str = new_str + strings[i];
						if((i+1) == num)break;
						i++;
					}
					new_str = new_str + "</span>";
					//alert(new_str);
					if((i+1) == num)break;
				}
				
				obj.innerHTML = new_str;
				
				//获取内边距
				var pt_height = getClass(obj,"padding-top");
				var pr_height = getClass(obj,"padding-right");
				var pb_height = getClass(obj,"padding-bottom");
				var pl_height = getClass(obj,"padding-left");
				
			}
		</script>
	</head>
	<body>
		<div class="wai">
			<div id="xian" class="xian">
				
			</div>
		</div>
		<script>
			sui("我好喜欢你!","xian");
		</script>
	</body>
</html>
